<template>
  <div >
    <div >
      <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">
        <div v-loading="loading" id="main" style="width: 600px;height:600px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "BookTypeDiagram",
  data(){
    return {
      loading:false,
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
            ]
          }
        ]
      }
    }
  },
  async mounted() {
    this.loading = true;
    let form = {
      token:window.sessionStorage.getItem("token")
    }
    const{data:res} = await this.$http.post('http://120.46.132.13:8081/api/dataInfo/getBookTypeNum',form)
    console.log(res)
    this.loading = false;
    if(res.code===200||res.code===0){
      for(let i=0; i<res.data.length; ++i){
        let dataForm = {
          name:Object.keys(res.data[i])[0],
          value:res.data[i][Object.keys(res.data[i])[0]]
        }
        this.option.series[0].data.push(dataForm)
      }
    }else{
      this.$notify.error("获取用户报表信息失败")
    }
    this.drawChart()
  },
  methods:{
    drawChart() {
      //基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 绘制图表
      myChart.setOption(this.option);

    }
  }
}
</script>

<style scoped>

</style>
